<template>
  <div style="padding:0px 10px;height: 100%;width: 100%;overflow:auto;">
    <Row type="flex" justify="center" :gutter="20" style="height: 100%">
      <i-col :span="16">
        <Row style="margin: 20px 10px auto 10px;">
          <Card class="player-card" :bordered="false">
            <p slot="title">{{videoTitle}}</p>
            <div slot="extra" style="margin-top: 12px;">
              <RadioGroup v-model="switchWay" type="button">
                <Radio
                  label="线路一"
                  style="padding-top:6px;height:45px;background-color:rgba(0,0,0,0);font-size:20px;color:#fff;font-weight:bold;"
                ></Radio>
                <Radio
                  label="线路二"
                  style="padding-top:6px;height:45px;background-color:rgba(0,0,0,0);font-size:20px;font-weight:bold;"
                ></Radio>
              </RadioGroup>
              <i-button
                style="font-size:20px;margin-left: 10px;"
                type="primary"
                icon="ios-arrow-back"
                @click="gobackVideoGridPages"
              >返回</i-button>
            </div>

            <div class="vidplayer">
              <rtmp-player v-if="switchWay === '线路一'" :src="rtmpVideoSrc"></rtmp-player>
              <flv-video-player v-else :videoSrc="flvVideoSrc"></flv-video-player>
            </div>
          </Card>
        </Row>
      </i-col>
      <i-col :span="8" style="height: 100%">
        <Row ref="datastatistic" style="margin-top:20px;">
          <data-statistics v-if="showConfig.isShowDataAnalysis"></data-statistics>
        </Row>
        <Row class="event-type">
          <i-col :span="13"><p style="color:white;font-weight:bold;font-size:25px;padding-left:10px">事件类型</p></i-col>
          <i-col :span="11" style="padding:2px 0px;"><Button type="info" size="default" @click="allEvents">全部事件</Button><Button type="success" style="margin-left:10px;" @click="legalEvents">合规事件</Button><Button type="warning" style="margin-left:10px;" @click="illegalEvents">违规事件</Button></i-col>
        </Row>
        <Row style="margin-top:0px;">
          <events-table ref="table" :tableData="monitorEventsTableListData" :tableHeight="tableH"></events-table>
        </Row>
      </i-col>
    </Row>
  </div>
</template>

<script>
import dayjs from "dayjs";
import FlvVideoPlayer from "./flvVideoPlayer";
import RtmpPlayer from "./rtmpPlayer";

import DataStatistics from "./dataStatistics";
import EventsTable from "./eventsTable.vue";

import { mapState, mapGetters, mapActions } from "vuex";

export default {
  components: {
    FlvVideoPlayer,
    RtmpPlayer,
    DataStatistics,
    EventsTable
  },
  data() {
    return {
      switchWay: "线路二",
      tableH: "300",
      tableContent:[]
    };
  },
  computed: {
    ...mapState([
      "monitorData",
      "stationVideoStreamUrl",
      "monitorEventsTableListData",
      "monitorEventsTableListLegalData",
      "monitorEventsTableListIllegalData"
    ]),
    ...mapGetters(["dayWeekMonthStartEndTime"]),
    // 显示配置
    showConfig() {
      console.log(
        "this.monitorData.reqPlayerInfo.category",
        this.monitorData.reqPlayerInfo.category
      );
      let showCategory = this.monitorData.reqPlayerInfo.category;
      if (showCategory === "switching_room") {
        return {
          isShowDataAnalysis: false
        };
      } else {
        return {
          isShowDataAnalysis: true
        };
      }
    },
    rtmpVideoSrc() {
      console.log("rtmp视频信息：", this.monitorData.reqPlayerInfo.streamUrl);
      return this.monitorData.reqPlayerInfo.streamUrl;
      // return 'rtmp://58.200.131.2:1935/livetv/hunantv'
    },
    flvVideoSrc() {
      console.log("flv视频信息：", this.monitorData.reqPlayerInfo.httpflvUrl);
      return this.monitorData.reqPlayerInfo.httpflvUrl;
    },
    videoTitle() {
      return this.monitorData.reqPlayerInfo.title;
    }
  },
  mounted() {
    // 根据场景选择显示的面板
    this.choosePanel();
    // 动态计算表格高度
    this.tableResize();
    window.addEventListener("resize", this.tableResize);
  },
  destroyed() {
    window.removeEventListener("resize", this.tableResize);
  },
  methods: {
    ...mapActions([
      "getMonitorEventsTableList",
      "closeDetailsLoadVideoGridPages",
      "getStationVideoStreamUrl"
    ]),
    gobackVideoGridPages() {
      this.closeDetailsLoadVideoGridPages();
      this.getStationVideoStreamUrl()
    },
    getLegalEvents(){
       if (this.monitorData.reqPlayerInfo.category === "gate") {
        let checkoutChannel = this.stationVideoStreamUrl.find(
          ele => ele.category === "checkout"
        );
        let eventsParams = {
          category:checkoutChannel.category,
          page_index:1,
          page_size:40,
          levels:0
        }
        this.getMonitorEventsTableList(eventsParams);
      } else if (this.monitorData.reqPlayerInfo.category === "overview") {
        let eventsParams = {
          category:"refuel_side",
          page_index:1,
          page_size:20,
          levels:0
        }
        this.getMonitorEventsTableList(eventsParams);
      } else {
        let eventsParams = {
          category:this.monitorData.reqPlayerInfo.category,
          page_index:1,
          page_size:20,
          levels:0
        }
        this.getMonitorEventsTableList(eventsParams);
      }
    },
    getIllegalEvents(){
       if (this.monitorData.reqPlayerInfo.category === "gate") {
        let checkoutChannel = this.stationVideoStreamUrl.find(
          ele => ele.category === "checkout"
        );
         let eventsParams = {
          category:checkoutChannel.category,
          page_index:1,
          page_size:40,
          levels:["1","2","3"].join(",")
        }
        this.getMonitorEventsTableList(eventsParams);
      } else if (this.monitorData.reqPlayerInfo.category === "overview") {
        let eventsParams = {
          category:"refuel_side",
          page_index:1,
          page_size:20,
          levels:["1","2","3"].join(",")
        }
        this.getMonitorEventsTableList(eventsParams);
      } else {
        let eventsParams = {
          category:this.monitorData.reqPlayerInfo.category,
          page_index:1,
          page_size:20,
          levels:["1","2","3"].join(",")
        }
        this.getMonitorEventsTableList(eventsParams);
      }
    },
    choosePanel() {
      // 如果是 超市大门，右侧数据显示收银台的数据
      if (this.monitorData.reqPlayerInfo.category === "gate") {
        let checkoutChannel = this.stationVideoStreamUrl.find(
          ele => ele.category === "checkout"
        );
        let eventsParams = {
          category:checkoutChannel.category,
          page_index:1,
          page_size:40,
        }
        this.getMonitorEventsTableList(eventsParams);
      } else if (this.monitorData.reqPlayerInfo.category === "overview") {
        let eventsParams = {
          category:"refuel_side",
          page_index:1,
          page_size:20
        }
        this.getMonitorEventsTableList(eventsParams);
      } else {
        let eventsParams = {
          category:this.monitorData.reqPlayerInfo.category,
          page_index:1,
          page_size:20
        }
        this.getMonitorEventsTableList(eventsParams);
      }
    },
    tableResize() {
      let h =
        window.innerHeight - this.$refs.datastatistic.$el.offsetHeight - 160;
      // header:64,datastatistic-margin-top:20,home padding:20,额外：56
      this.tableH = "" + h;
    },
    allEvents(){
      // this.tableContent = this.monitorEventsTableListData
      this.choosePanel()
    },
    legalEvents(){
      this.getLegalEvents()
      // this.tableContent = this.monitorEventsTableListLegalData
    },
    illegalEvents(){
      this.getIllegalEvents()
      // this.tableContent = this.monitorEventsTableListIllegalData
    }
  }
};
</script>

<style lang="less">
.vidplayer {
  height: 100%;
  width: 100%;
}
.player-card .ivu-card-head {
  padding: 0px 10px;
  background-color: #13a4c2;
  border-bottom: 1px solid #13a4c2;
  height: 80px;
}
.player-card .ivu-card-head p {
  font-size: 4rem;
  height: 80px;
  line-height: 80px;
  color: #fff;
  text-align: left;
}
.player-card .ivu-card-body {
  padding: 0px;
}
.player-card .ivu-radio-wrapper-checked {
  border-color: #fa541c !important;
  color: #fa541c !important;
}
.event-type {
  background-color: #13a4c2;
  margin-top: 10px;
}
// .player-card .ivu-radio-wrapper {
//   border-color: #515a6e !important;
//   color: #515a6e !important;
// }
</style>


